import React from 'react';
import styles from './index.less';
import { InputNumber, Tooltip } from 'antd';
import { useTablePipeline } from 'ali-react-table';
import _ from 'lodash';

import { CopyOutlined } from '#/utils/antdIcons.js';
import { OPTION_KEY } from '../../helper.js';
import { AntdBaseTable } from './TBaseTable';

const BaseTable = (props: any) => {
  const {
    tableData,
    tableHeader = [],
    style,
    isRatio = true,
    onClick,
    editor = false,
    onValueChange,
  } = props;
  const dataTable = _.cloneDeep(tableData);
  const onCopyHanlder = (record: any, field: any) => {
    onValueChange(record[field], field);
  };
  const useAll = (record: any) => {
    if (isRatio) {
      const reduceArr: any = [],
        addArr: any = [];
      Object.values(OPTION_KEY).forEach((_t: any) => {
        if (record[_t] - tableData[0][_t] < 0) {
          reduceArr.push({ key: _t, value: record[_t] });
        } else {
          addArr.push({ key: _t, value: record[_t] });
        }
      });
      //先减少比例
      reduceArr.forEach((t: any) => {
        onValueChange(t.value, t.key);
      });
      //再增加比例
      addArr.forEach((t: any) => {
        onValueChange(t.value, t.key);
      });
      return;
    }
    Object.values(OPTION_KEY).forEach((_t: any) => {
      onValueChange(record[_t], _t);
    });
  };
  // 处理表头
  const getColumns = (columsValue: any) => {
    const columns: any[] = [];
    columns.push({
      name: '',
      align: 'center',
      code: 'title',
      width: 120,
      lock: true,
      render: (value: any) => {
        return !value && value !== 0 ? (
          '-'
        ) : (
          <div className={styles.flexDiv}>
            <Tooltip title={value}>
              <span className={styles.autoTitle}>{value}</span>
            </Tooltip>
          </div>
        );
      },
    });
    columsValue.forEach((item: any) => {
      columns.push({
        name: item.name,
        align: 'center',
        code: item.field,
        width: isRatio ? 90 : 100,
        render: (value: any, record: any) => {
          if (item.field === 'count') {
            return !value && value !== 0 ? (
              '-'
            ) : (
              <div className={styles.flexDiv}>
                <Tooltip title={value}>
                  <span className={styles.autoTitle}>{value}</span>
                </Tooltip>
              </div>
            );
          }

          if (!value && value !== 0) {
            return '-';
          }
          if (!editor) {
            return isRatio ? value + '%' : value;
          }
          //是否月度百分比
          if (isRatio) {
            if (record.editor) {
              return (
                <InputNumber
                  value={value}
                  size="small"
                  className={styles.radioBox}
                  defaultValue={value}
                  min={0}
                  max={100}
                  step={0.01}
                  formatter={(val) => `${val}%`}
                  parser={(val) => val!.replace('%', '')}
                  onChange={(e) => {
                    onValueChange(e, item.field);
                  }}
                />
              );
            } else {
              return (
                <div className={styles.flexDiv}>
                  <Tooltip title={value}>
                    <span className={styles.autoTitle}>{value}%</span>
                  </Tooltip>
                  <CopyOutlined
                    className={styles.copy}
                    onClick={() => {
                      onCopyHanlder(record, item.field);
                    }}
                  />
                </div>
              );
            }
          } else {
            if (record.editor) {
              return (
                <InputNumber
                  defaultValue={value}
                  size="small"
                  className={styles.numBox}
                  value={value}
                  max={item.field + '_Capacity'}
                  formatter={(val) => `${val}`}
                  parser={(val) => val!.replace('', '')}
                  min={0}
                  step={0.001}
                  onChange={(e) => {
                    onValueChange(e, item.field);
                  }}
                />
              );
            } else {
              return (
                <div className={styles.flexDiv}>
                  <Tooltip title={parseFloat(value).toFixed(3)}>
                    <span className={styles.autoTitle}>{parseFloat(value).toFixed(3)}</span>
                  </Tooltip>
                  <CopyOutlined
                    className={styles.copy}
                    onClick={() => {
                      onCopyHanlder(record, item.field);
                    }}
                  />
                </div>
              );
            }
          }
        },
      });
    });
    if (editor) {
      columns.push({
        name: '操作',
        align: 'center',
        code: 'editor',
        width: 90,
        lock: true,
        render: (value: any, record: any) => {
          if (value) {
            return (
              <span className={styles.editor} onClick={onClick}>
                {isRatio ? '设置比例' : '一键调整'}
              </span>
            );
          } else {
            return (
              <span
                className={styles.editor}
                onClick={() => {
                  useAll(record);
                }}
              >
                全部复用
              </span>
            );
          }
        },
      });
    }

    return columns;
  };
  const pipeline = useTablePipeline({ components: {} }).input({
    dataSource: dataTable,
    columns: getColumns(tableHeader),
  });

  return (
    <div className={styles.outside} style={style}>
      <AntdBaseTable
        className={['bordered', `${styles.custor}`].join(' ')}
        style={{
          // '--header-bgcolor': '#383C3E',
          // '--header-color': 'white',
          '--row-height': '21px',
          '--header-row-height': '28px',
          '--bgcolor': 'var(--bg-main)',
          '--color': '#D3D4D4',
          '--cell-padding': '4px 0px',
          '--hover-bgcolor': 'var(--bg-main)',
        }}
        {...pipeline.getProps()}
        useVirtual={{ horizontal: true, vertical: true, header: false }}
      />
    </div>
  );
};

export default BaseTable;
